<template>
<div class="confirmWrap">
    <div class="box firstBox">
        <el-form :model="formData" ref='formData' :show-message= true :inline="true" :label-width="formLabelWidth">
            <h3>
                <span class= 'h3title'>个人信息</span>
            </h3>
            <el-form-item label="年龄："  >
                <el-input auto-complete="off" placeholder="请输入" style = 'width: 217px;'></el-input>
            </el-form-item>
            <el-form-item label="性别：">
                <el-radio-group v-model="formData.gender">
                    <el-radio label="男"></el-radio>
                    <el-radio label="女"></el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="年龄："  >
                <el-input auto-complete="off" placeholder="请输入" style = 'width: 217px;'></el-input>
            </el-form-item>
            <el-form-item label="身份证号："  >
                <el-input auto-complete="off" placeholder="请输入" style = 'width: 217px;'></el-input>
            </el-form-item>

            <el-form-item label="户籍地：" >
                <el-cascader
                    placeholder="试试搜索：浦东"
                    :options="options"
                    filterable
                    change-on-select
                    style = 'width: 217px;'
                ></el-cascader>
            </el-form-item>

            <el-form-item label="手机号："  >
                <el-input auto-complete="off" placeholder="请输入" style = 'width: 217px;'></el-input>
            </el-form-item>
            <el-form-item label="邮箱：" >
                <el-input auto-complete="off" placeholder="请输入" style = 'width: 217px;'></el-input>
            </el-form-item>
            <br>

            <el-form-item label="身份证正面照"  >
                <el-upload
                    class="avatar-uploader"
                    action="https://jsonplaceholder.typicode.com/posts/"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload">
                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
            <el-form-item label="身份证反面照"  >
                <el-upload
                    class="avatar-uploader"
                    action="https://jsonplaceholder.typicode.com/posts/"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload">
                    <img v-if="imageUrl2" :src="imageUrl2" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
            <el-form-item label="近期照片"  >
                <el-upload
                    class="avatar-uploader"
                    action="https://jsonplaceholder.typicode.com/posts/"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload">
                    <img v-if="imageUrl3" :src="imageUrl3" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
        </el-form>
    </div>
    <div class="box lastBox">
        <el-form :model="form" ref='form' :show-message= true :inline="true" :label-width="formLabelWidth">        
            <h3>
                <span class= 'h3title'>工作信息</span>
            </h3>
            <el-form-item label="行业：">
                <el-select v-model="form.value" placeholder="请选择">
                    <el-option label="金融" value = '0'></el-option>
                    <el-option label="IT" value = '1'></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="公司："  >
                <el-input auto-complete="off" placeholder="请输入" style = 'width: 217px;'></el-input>
            </el-form-item>
            <el-form-item label="职位："  >
                <el-input auto-complete="off" placeholder="请输入" style = 'width: 217px;'></el-input>
            </el-form-item>
            <el-form-item label="公司地址：" >
                <el-cascader
                    placeholder="试试搜索：浦东"
                    :options="options"
                    filterable
                    change-on-select
                    style = 'width: 217px;'
                ></el-cascader>
            </el-form-item>
            <el-form-item label="公司电话："  >
                <el-input auto-complete="off" placeholder="请输入" style = 'width: 217px;'></el-input>
            </el-form-item>
            <el-form-item label="工作年限："  >
                <el-input auto-complete="off" placeholder="请输入" style = 'width: 217px;'></el-input>
            </el-form-item>
            <el-form-item label="薪资范围：">
                <el-select v-model="form.value2" placeholder="请选择" style = 'width: 217px;'>
                    <el-option label="10000-15000" value = '0'></el-option>
                    <el-option label="15000-25000" value = '1'></el-option>
                    <el-option label="25000-35000" value = '2'></el-option>
                </el-select>
            </el-form-item>
            
            <el-form-item label="员工类型：">
                <el-radio-group v-model="form.gender">
                    <el-radio label="正式员工" value='0'></el-radio>
                    <el-radio label="派遣" value = '1'></el-radio>
                </el-radio-group>
            </el-form-item>
        </el-form>
    </div>
</div>
</template>
<script>
export default {
  components: { },
  data() {
    return {
      formLabelWidth: '120px',
      formData: {
        gender: ''
      },
      form: {
        gender: '',
        value: '',
        value2: ''
      },
      imageUrl: '',
      imageUrl2: '',
      imageUrl3: '',
      options: [{
        value: 'shanghai',
        label: '上海',
        children: [{
          value: 'shanghai',
          label: '上海',
          children: [{
            value: 'pudong',
            label: '浦东'
          }, {
            value: 'xuhui',
            label: '徐汇'
          }]
        }]
      }]
    }
  },
  mounted() {
  },
  methods: {
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    }
  }
}
</script>
<style lang="scss">
.confirmWrap{
  background-color: #f0f2f5;
  padding: 20px;
  .box{
    background-color: #fff;
    padding: 20px;
    &.firstBox{
        margin-bottom: 20px;
    }
  }
  h3{
    padding: 0;
    font-weight: normal;
    &>span{
      display: inline-block;
      width: 120px;
      height:36px;
      text-align: center;
      line-height: 36px;
      background: #eee;
    }
    &.h3title{
      border-bottom: 1px solid #eee;
      .applicant{
        padding: 0;
        margin: 0;
        float: right;
        height:36px;
        line-height: 36px;
        font-size: 16px;
        span{
          color:#bbb;
        }
      }
    }
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
}
</style>

